<template>
  <div class="pad_10">
    <el-form ref="queryRef" :inline="true" label-width="68px">
      <el-form-item>
        <el-button @click="handleQuery">保存</el-button>
        <el-button @click="Cancel">取消</el-button>
        <el-button :disabled="!route.query.id" @click="auditAuthFun">实名审核通过</el-button>
        <el-button :disabled="!route.query.id" @click="writeOffFun">实名审核审核驳回</el-button>
        <el-button :disabled="!route.query.id" @click="agencyactiveFun">审核协议通过</el-button>
        <el-button :disabled="!route.query.id" @click="medicalRepresentativeBhFun">协议审核驳回</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <div class="form_box_flex">
    <SetUserSelect
      :key="keys"
      ref="setUserSelect"
      class="queryForm"
      :labelwidth="150"
      :isShowUserBtn="false"
      :buttonIsShow="false"
      :formData="bill"
      :queryParams="datas"
      @selChangeFun="changeFun"
    ></SetUserSelect>
      <el-form ref="queryFormmin" :model="datas" label-width="75px">
        <el-row :gutter="20" align="stretch">
          <el-col :span="12">
            <el-card class="box-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>营业执照</span>
                </div>
              </template>
              <el-form-item label="编号:" 
                prop="businessLicenseNumber" 
                :rules="[
                {
                  required: true,
                  message: '请输入编号',
                  trigger: ['blur'],
                },
              ]">
                <el-input
                  placeholder="请输入编号"
                  v-model="datas.businessLicenseNumber"
                  style="width: 300px"
                />
              </el-form-item>
              <el-row :gutter="20" align="stretch">
                <el-col :span="12">
                 <el-form-item label-width="85px" label="营业执照正本:" 
                  prop="photoList[1].url" 
                  :rules="[
                  {
                    required: true,
                    message: '请上传营业执照正本',
                    trigger: ['blur'],
                  },
                ]">
                  <image-upload
                    :disableds="true"
                    :isShowTip="false"
                    showTipText=""
                    :limit="1"
                    v-model="photoList1"
                  ></image-upload>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <!-- <el-form-item label-width="85px" label="营业执照副本:" 
                  prop="photoList[1].url" 
                  :rules="[
                  {
                    required: true,
                    message: '请上传营业执照副本',
                    trigger: ['blur'],
                  },
                ]">
                  <image-upload
                    :isShowTip="false"
                    showTipText=""
                    :limit="1"
                    v-model="datas.photoList[1].url"
                  ></image-upload>
                </el-form-item> -->
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>法人身份证信息</span>
                </div>
              </template>
              <el-form-item label="身份证号:" 
                label-width="85px"
                prop="legalPersonCard" 
                :rules="[
                {
                  required: true,
                  message: '请输入身份证号',
                  trigger: ['blur'],
                },
              ]">
                <el-input
                  placeholder="请输入身份证号"
                  v-model="datas.legalPersonCard"
                  style="width: 300px"
                />
              </el-form-item>
              <el-row :gutter="20" align="stretch">
                <el-col :span="12">
                  <el-form-item label-width="85px" label="身份证正面:" 
                      prop="photoList[2].url" 
                      :rules="[
                      {
                        required: true,
                        message: '请上传身份证正面',
                        trigger: ['blur'],
                      },
                    ]">
                    <image-upload
                      :disableds="true"
                      :isShowTip="false"
                      showTipText=""
                      :limit="1"
                      v-model="photoList2"
                    ></image-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label-width="85px" label="身份证反面:" 
                      prop="photoList[2].url" 
                      :rules="[
                      {
                        required: true,
                        message: '请上传身份证反面',
                        trigger: ['blur'],
                      },
                    ]">
                    <image-upload
                      :disableds="true"
                      :isShowTip="false"
                      showTipText=""
                      :limit="1"
                      v-model="photoList12"
                    ></image-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" align="stretch" style="margin-top: 20px">
          <el-col :span="12">
            <el-card class="box-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>开户信息</span>
                </div>
              </template>
              <!-- <el-form-item label="开户许可证编号:" 
                label-width="85px"
                prop="openingAccountNumber" 
                :rules="[
                {
                  required: true,
                  message: '请输入开户许可证编号',
                  trigger: ['blur'],
                },
              ]">
                <el-input
                  placeholder="请输入开户许可证编号"
                  v-model="datas.openingAccountNumber"
                  style="width: 300px"
                />
              </el-form-item> -->
              <el-row :gutter="20" align="stretch">
                <el-col :span="12">
                <el-form-item label-width="85px" label="开户许可证:" 
                    prop="photoList[3].url" 
                    :rules="[
                    {
                      required: true,
                      message: '请上传开户许可证',
                      trigger: ['blur'],
                    },
                  ]">
                  <image-upload
                    :disableds="true"
                    :isShowTip="false"
                    showTipText=""
                    :limit="1"
                    v-model="photoList3"
                  ></image-upload>
                </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>开户银行信息</span>
                </div>
              </template>
              <el-form-item label="银行卡号:" 
                label-width="85px"
                prop="bankCardNumber" 
                :rules="[
                {
                  required: true,
                  message: '请输入银行卡号',
                  trigger: ['blur'],
                },
              ]">
                <el-input
                  placeholder="请输入开户许可证编号"
                  v-model="datas.bankCardNumber"
                  style="width: 300px"
                />
              </el-form-item>
              <el-form-item label="开户行:" 
                label-width="85px"
                prop="bank" 
                :rules="[
                {
                  required: true,
                  message: '请输入开户行',
                  trigger: ['blur'],
                },
              ]">
                <el-input
                  placeholder="请输入开户许可证编号"
                  v-model="datas.bank"
                  style="width: 300px"
                />
              </el-form-item>
              <!-- <el-row :gutter="20" align="stretch">
                <el-col :span="12">
                  <el-form-item label-width="85px" label="开户行正面:" 
                    prop="photoList[5].url" 
                    :rules="[
                    {
                      required: true,
                      message: '请上传开户行正面',
                      trigger: ['blur'],
                    },
                  ]">
                  <image-upload
                    :isShowTip="false"
                    showTipText=""
                    :limit="1"
                    v-model="datas.photoList[5].url"
                  ></image-upload>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label-width="85px" label="开户行反面:" 
                    prop="photoList[6].url" 
                    :rules="[
                    {
                      required: true,
                      message: '请上传开户行反面',
                      trigger: ['blur'],
                    },
                  ]">
                  <image-upload
                    :isShowTip="false"
                    showTipText=""
                    :limit="1"
                    v-model="datas.photoList[6].url"
                  ></image-upload>
                </el-form-item>
                </el-col>
              </el-row> -->
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" align="stretch" style="margin-top: 20px">
          <el-col :span="12">
            <el-card class="box-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>协议信息</span>
                </div>
              </template>
              <!-- <el-checkbox v-model="datas.checked2">是否已经签订协议</el-checkbox> -->
              <div @click="gotoHtmlFun(0)" class="color_b">代理商协议</div>
              <div @click="gotoHtmlFun(1)" class="color_b">推广行为准则</div>
              <div @click="gotoHtmlFun(2)" class="color_b">反腐承诺书</div>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-dialog v-model="dialogFormVisible" title="协议">
      <!-- <div v-html="htmlDom"></div> -->
      <img style="width: 100%" :src="htmlDom" alt="">
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { addAgency, agencyById, eitHagency, auditAuth, agencyactive, refuseauth, medicalRepresentativeBh  } from "@/api/basicManagement/agencyMana";
import data from "./data";
const { bill, datas } = data;
datas.value = {
  status: '0',
  photoList: [
    {
      category: 0,
      type: 1,
      url: ''
    },
    {
      category: 1,
      type: 1,
      url: ''
    },
    {
      category: 0,
      type: 2,
      url: ''
    },
    {
      category: 1,
      type: 2,
      url: ''
    },
    {
      category: 0,
      type: 3,
      url: ''
    },
    {
      category: 0,
      type: 4,
      url: ''
    },
    {
      category: 1,
      type: 4,
      url: ''
    },
  ]
}
const { proxy } = getCurrentInstance();
let proxys: any = proxy;
// const { agency_Mana_status } = proxys.useDict("agency_Mana_status");
const keys = ref(0)
const route:any = useRoute();
// watch(
//   agency_Mana_status,
//   (newV, oldV) => {
//     bill.value[4].selectData = agency_Mana_status
//     keys.value = new Date().getTime();
//   }
// );

const agencyByIdFun = () => {
  agencyById(route.query.id).then((res) => {
    res.data.status = ''+res.data.status
    res.data.provinceListMap = res.data.provinceList.map(item => item.cityId)
    res.data.applyDrugs = res.data.drugList.map(item => item.drugId)
    if(res.data.photoList){
      photoList1.value = res.data.photoList.filter(item => item.type == 1)[0]?.url
      photoList12.value = res.data.photoList.filter(item => item.type == 2&&item.category == 0)[0]?.url
      photoList2.value = res.data.photoList.filter(item => item.type == 2&&item.category == 1)[0]?.url
      photoList3.value = res.data.photoList.filter(item => item.type == 3)[0]?.url
    }
    
    datas.value = res.data
  })
}
const photoList1 = ref('')
const photoList12 = ref('')
const photoList2 = ref('')
const photoList3 = ref('')
route.query.id && agencyByIdFun();


const handleQuery = function (): void {
  Promise.all([proxys.$refs.setUserSelect.submitForm(),proxys.$refs.queryFormmin.validate()]).then((valid) => {
    // let province:any = [];
    // bill.value[5].selectData.forEach((item) => {
    //   if (valid[0].province.includes(item.id)) {
    //     province.push(item.cityname)
    //   }
    // });
    (!route.query.id? addAgency : eitHagency)({
      ...valid[0],
      provinceList: valid[0].provinceListMap.map((item, index) => { return {cityId: item,cityName: valid[0].province.split(',')[index]} }),
      drugList: valid[0].applyDrugs.map((item, index) => { return {drugId: item,drugName: valid[0].province.split(',')[index]} }),
    }).then(() => {
      proxys.$modal.msgSuccess(`${route.query.id? '修改' : '新增'}成功`);
      // Cancel()
    })
  })
};
const Cancel = () => {
  datas.value = {
  photoList: [
    {
      category: 0,
      type: 1,
      url: ''
    },
    {
      category: 1,
      type: 1,
      url: ''
    },
    {
      category: 0,
      type: 2,
      url: ''
    },
    {
      category: 1,
      type: 2,
      url: ''
    },
    {
      category: 0,
      type: 3,
      url: ''
    },
    {
      category: 0,
      type: 4,
      url: ''
    },
    {
      category: 1,
      type: 4,
      url: ''
    },
  ]
}
  const obj = { path: "/basicInformation/agencyManaList" };
  proxys.$tab.closeOpenPage(obj);
}
const changeFun = function (e: any): void {
  console.log(e);
};
const auditAuthFun = () => {
  auditAuth({
    id: route.query.id
  }).then(() => {
    proxys.$modal.msgSuccess(`审核成功`);
    agencyByIdFun()
  })
}

const agencyactiveFun = () => {
  agencyactive({
    id: route.query.id
  }).then((res) => {
    proxys.$modal.msgSuccess(`审核成功`);
    agencyByIdFun()
  })
}

let dialogFormVisible = ref(false)
let htmlDom = ref('')
const gotoHtmlFun = (index) => {
  if (!datas.value.agreementList.length) {
    return
  }
  
  htmlDom.value = datas.value.agreementList.filter(item => item.type == index)[0].url
  if (htmlDom.value) {
    if (htmlDom.value.split('.')[htmlDom.value.split('.').length-1] == 'pdf') {
      window.open(htmlDom.value)
      return
    }
  }
  dialogFormVisible.value = true
}

const writeOffFun = (item) => {
  // dialogFormVisible.value = true
  refuseauth({
    id: route.query.id
  }).then(() => {
    proxys.$modal.msgSuccess(`驳回成功`);
    agencyByIdFun()
  })
}
const medicalRepresentativeBhFun = () => {
  medicalRepresentativeBh({
    id: route.query.id
  }).then(() => {
    proxys.$modal.msgSuccess(`驳回成功`);
    agencyByIdFun()
  })
}
</script>
<style scoped>
.pad_10 {
  padding: 10px;
  display: flex;
  height: calc(100vh - 100px);
  flex-direction: column;
  overflow: hidden;
}
.form_box_flex {
  flex: 1;
  overflow: hidden;
  overflow-y: scroll;
}
.pad_10 .el-form--inline .el-form-item {
  margin: 0;
}
.el-divider--horizontal {
  margin: 10px 0;
}
:deep(.el-card) {
  height: 100%;
}
.color_b {
  margin: 20px 0;
  color: rgba(73, 173, 251, 1);
  cursor: pointer;
}
</style>